//绑定点击事件
function moveLine() {
    $('.tab .tab-item').on('click', function () {
        movePosition(this, getSpacing());
    })
}

//初始化下划线滑动
function initUnderLine() {
    $(document).ready(function () {
        $('.tab .tab-item').each(function () {
            if ($(this).hasClass('tab-active')) {
                movePosition(this, getSpacing());
            }
        })
    })
}

initUnderLine();

//获取间隔的距离
function getSpacing() {
    const total = $('.tab').width();
    let spacing = total;
    //总长度减去5个菜单的宽度  最后除以4个间隔（适合于5个菜单）
    $('.tab .tab-item').each(function () {
        spacing = spacing - $(this).width();
    })
    spacing = spacing / ($('.tab .tab-item').length - 1);
    return spacing;
}

//移动下滑块
function movePosition(outThat, spacing) {
    let left = 0;
    let oldWidth = $('.under-line').width();

    //差值
    let diff = 0;
    $('.tab .tab-item').each(function () {
        //  取最大值
        let thisWidth = oldWidth >= $(this).width() ? oldWidth : $(this).width();
        left = left + thisWidth + spacing;
        if (outThat == this) {
            left = left - thisWidth - spacing;
            $('.under-line').css('width', thisWidth + 'px');
            return false;
        }
    });
    $('.under-line').css('left', left - diff+ 'px');
}

function closeMobileMenu() {
    $('.mobile-header').css('visibility', 'hidden');
    $('.mobile-header').css('height', '0px');
    $('.mobile-button').css('top', 0);
    $('.page').css('margin-top', 0);
}

//初始化页面，添加监听事件，滑动到对应的菜单下面
// $rootScope.$watch('pageIndex', function (newV, oldV) {
//     if (newV != oldV) {
//         $scope.timer = $timeout(function () {
//             initUnderLine();
//             $timeout.cancel($scope.timer);
//         }, 200);
//     }
// })
const mobileHeaderHeight = '180px';
$('.mobile-button').on('click', function (event) {
    event.stopPropagation();  //只阻止了冒泡事件， 默认默认行为没有阻止
    if ($('.mobile-header').css('visibility') == 'hidden') {
        $('.mobile-header').css('visibility', 'visible');
        $('.mobile-header').css('height', mobileHeaderHeight);
        $('.mobile-button').css('top', mobileHeaderHeight);
        $('.page').css('margin-top', mobileHeaderHeight);
    } else {
        closeMobileMenu();
    }
})

function goTop(id) {
    $('html, body').animate({scrollTop: $('#' + id).offset().top}, 1000);
}

